<script setup name="PreviewOfAchievements">
import { useI18n } from 'vue-i18n'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { imageUrl } from '@/utils/imageUrl'

const { t } = useI18n()

// 预览状态
const showPreview = ref(false)
const currentImageIndex = ref(0)
const currentCategory = ref('')
const touchStartX = ref(0)
const touchEndX = ref(0)

// 证书数据
const certificates = [
	{
		name: 'AboutUs.PreviewOfAchievements.imageName1',
		image: '"创客中国"一等奖.jpg',
	},
	{
		name: 'AboutUs.PreviewOfAchievements.imageName3',
		image: '"科创甬江"优胜奖.jpg',
	},
	{
		name: 'AboutUs.PreviewOfAchievements.imageName4',
		image: '上海市博士后双赛优胜奖.jpg',
	},
	{
		name: 'AboutUs.PreviewOfAchievements.imageName5',
		image: '浙江省科技型中小企业.jpg',
	},
	{
		name: 'AboutUs.PreviewOfAchievements.imageName2',
		image: '"海聚英才"优胜奖.jpg',
	},
]

// 生成各模块的图片列表
const softwareImages = computed(() => {
	return Array.from({ length: 23 }, (_, i) =>
		imageUrl(`软著${i + 1}.jpg`, '成果预览/软著')
	)
})

const patentImages = computed(() => {
	return Array.from({ length: 7 }, (_, i) =>
		imageUrl(`专利${i + 1}.jpg`, '成果预览/专利')
	)
})

const certificateImages = computed(() => {
	return certificates.map((cert) => imageUrl(cert.image, '成果预览/证书'))
})

// 所有图片数据
const allImages = computed(() => {
	const softwares = Array.from({ length: 23 }, (_, i) => ({
		src: imageUrl(`软著${i + 1}.jpg`, '成果预览/软著'),
		alt: `软件著作权 ${i + 1}`,
		category: 'software',
		title: `软件著作权 ${i + 1}`,
	}))

	const patents = Array.from({ length: 7 }, (_, i) => ({
		src: imageUrl(`专利${i + 1}.jpg`, '成果预览/专利'),
		alt: `专利证书 ${i + 1}`,
		category: 'patent',
		title: `专利证书 ${i + 1}`,
	}))

	const certs = certificates.map((cert, index) => ({
		src: imageUrl(cert.image, '成果预览/证书'),
		alt: t(cert.name),
		category: 'certificate',
		title: t(cert.name),
	}))

	return [...softwares, ...patents, ...certs]
})

// 当前分类的图片
const currentCategoryImages = computed(() => {
	return allImages.value.filter((img) => img.category === currentCategory.value)
})

// 当前图片信息
const currentImage = computed(() => {
	return currentCategoryImages.value[currentImageIndex.value] || {}
})

// 关闭预览
const closePreview = () => {
	showPreview.value = false
	document.body.style.overflow = 'auto'
}

// 上一张
const prevImage = () => {
	if (currentImageIndex.value > 0) {
		currentImageIndex.value--
	} else {
		currentImageIndex.value = currentCategoryImages.value.length - 1
	}
}

// 下一张
const nextImage = () => {
	if (currentImageIndex.value < currentCategoryImages.value.length - 1) {
		currentImageIndex.value++
	} else {
		currentImageIndex.value = 0
	}
}

// 键盘事件处理
const handleKeydown = (e) => {
	if (!showPreview.value) return

	switch (e.key) {
		case 'Escape':
			closePreview()
			break
		case 'ArrowLeft':
			prevImage()
			break
		case 'ArrowRight':
			nextImage()
			break
	}
}

// 触摸事件处理
const handleTouchStart = (e) => {
	touchStartX.value = e.touches[0].clientX
}

const handleTouchEnd = (e) => {
	touchEndX.value = e.changedTouches[0].clientX
	handleSwipe()
}

const handleSwipe = () => {
	const swipeThreshold = 50
	const diff = touchStartX.value - touchEndX.value

	if (Math.abs(diff) > swipeThreshold) {
		if (diff > 0) {
			nextImage()
		} else {
			prevImage()
		}
	}
}

// 生命周期
onMounted(() => {
	document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
	document.removeEventListener('keydown', handleKeydown)
	document.body.style.overflow = 'auto'
})
</script>

<template>
	<section class="achievements">
		<!-- 证书展示 -->
		<div class="achievement-section certificates">
			<div class="section-header">
				<h2 class="section-title">
					{{ t('AboutUs.PreviewOfAchievements.title3') }}
				</h2>
			</div>
			<div class="certificate-grid">
				<div class="cards-grid">
					<div
						class="image-item"
						v-for="(cert, index) in certificates"
						:key="cert.name"
					>
						<div class="card certificate-card">
							<div class="image-container">
								<el-image
									:src="imageUrl(cert.image, '成果预览/证书')"
									:alt="'荣誉证书' + cert.name"
									class="image-placeholder"
									:preview-src-list="certificateImages"
									:initial-index="index"
									fit="contain"
									preview-teleported
									hide-on-click-modal
								/>
								<div class="image-overlay">
									<span class="overlay-text">{{
										t('AboutUs.PreviewOfAchievements.preview')
									}}</span>
								</div>
							</div>
							<div class="certificate-info">
								<h3 class="certificate-name">{{ t(cert.name) }}</h3>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 软著展示 -->
		<div class="achievement-section software">
			<div class="section-header">
				<h2 class="section-title">
					{{ t('AboutUs.PreviewOfAchievements.title1') }}
				</h2>
			</div>
			<div class="cards-grid software-grid">
				<div class="image-item" v-for="i in 23" :key="'soft-' + i">
					<div class="card">
						<div class="image-container">
							<el-image
								:src="imageUrl(`软著${i}.jpg`, '成果预览/软著')"
								:alt="'软件著作权' + i"
								class="image-placeholder"
								:preview-src-list="softwareImages"
								:initial-index="i - 1"
								fit="contain"
								preview-teleported
								hide-on-click-modal
							/>
							<div class="image-overlay">
								<span class="overlay-text">{{
									t('AboutUs.PreviewOfAchievements.preview')
								}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 专利展示 -->
		<div class="achievement-section patents">
			<div class="section-header">
				<h2 class="section-title">
					{{ t('AboutUs.PreviewOfAchievements.title2') }}
				</h2>
			</div>

			<div class="cards-grid patents-grid">
				<div class="image-item" v-for="i in 7" :key="'patent-' + i">
					<div class="card">
						<div class="image-container">
							<el-image
								:src="imageUrl(`专利${i}.jpg`, '成果预览/专利')"
								:alt="'专利证书' + i"
								class="image-placeholder"
								:preview-src-list="patentImages"
								:initial-index="i - 1"
								fit="contain"
								preview-teleported
								hide-on-click-modal
							/>
							<div class="image-overlay">
								<span class="overlay-text">{{
									t('AboutUs.PreviewOfAchievements.preview')
								}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<style scoped lang="scss">
/*
 * ===========================================
 * 成果预览页面样式 - PreviewOfAchievements/index.vue
 * ===========================================
 */

.achievements {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-20) var(--space-4);
}

/* ===========================================
 * 成果展示区域
 * =========================================== */

.achievement-section {
	margin-bottom: var(--space-20);

	&:last-child {
		margin-bottom: 0;
	}

	.section-header {
		text-align: center;
		margin-bottom: var(--space-10);

		.section-title {
			font-size: var(--font-size-3xl);
			font-weight: var(--font-weight-bold);
			color: var(--brand-primary); /* 使用品牌主色 */
			margin: 0;
			line-height: var(--line-height-tight);

			&::after {
				content: '';
				display: block;
				width: 60px;
				height: 3px;
				background: var(--brand-primary);
				margin: var(--space-4) auto 0;
				border-radius: var(--radius-base);
			}
		}
	}
}

/* ===========================================
 * 卡片网格布局
 * =========================================== */

.cards-grid {
	display: grid;
	gap: var(--space-6); /* 增加间距从 space-4 到 space-6 */
	padding: var(--space-8) 0; /* 增加上下padding */

	/* 默认网格 - 适用于证书和专利 */
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 软件著作权特殊布局 - 一行7个 */
.software-grid {
	grid-template-columns: repeat(7, 1fr);
	gap: var(--space-5); /* 增加软件著作权的间距 */

	.image-item .card {
		padding: var(--space-3); /* 增加内边距从 space-2 到 space-3 */

		.image-container .image-placeholder {
			height: 180px;
		}
	}
}

.patents-grid {
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-5); /* 增加软件著作权的间距 */
	.image-container {
		margin: 0 !important;
	}
}

/* ===========================================
 * 图片项和卡片样式
 * =========================================== */

.software {
	.card {
		height: 200px !important;
		min-height: initial !important;
		box-sizing: border-box;
		.image-container {
			height: 100% !important;
			min-height: initial !important;
			margin: 0 !important;
		}
	}
}

.image-item {
	animation: fadeInUp var(--duration-500) var(--ease-out);

	.card {
		background: var(--card-bg);
		border: 1px solid var(--card-border);
		border-radius: var(--radius-xl);
		padding: var(--space-5); /* 增加默认内边距从 space-4 到 space-5 */
		box-shadow: var(--shadow-base); /* 使用基础阴影变量 */
		transition: all var(--transition-base);
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 280px; /* 增加最小高度从 240px 到 280px */
		box-sizing: border-box; /* 确保padding和border包含在总尺寸内 */

		&:hover {
			transform: translateY(-2px); /* 直接使用CSS值 */
			box-shadow: var(--shadow-lg); /* 使用基础阴影变量 */
		}

		.image-container {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 220px; /* 增加最小高度从 200px 到 220px */
			position: relative;
			overflow: hidden;
			border-radius: var(--radius-lg);
			margin-bottom: var(--space-2); /* 添加底部间距 */

			.image-placeholder {
				width: 100%;
				height: 220px; /* 增加高度从 200px 到 220px */
				transition: all var(--transition-base);

				:deep(.el-image) {
					width: 100%;
					height: 100%;
					cursor: pointer;
				}

				:deep(.el-image__inner) {
					object-fit: contain;
					width: 100%;
					height: 100%;
					cursor: pointer;
					transition: all var(--transition-base);
				}
			}

			/* 悬停遮罩层 */
			.image-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, var(--opacity-50));
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0;
				transition: all var(--transition-base);
				cursor: pointer;
				z-index: var(--z-10);
				border-radius: var(--radius-lg);

				.overlay-text {
					color: var(--color-white);
					font-weight: var(--font-weight-semibold);
					font-size: var(--font-size-base);
					text-shadow: 0 2px 4px rgba(0, 0, 0, var(--opacity-30));
					pointer-events: none;
				}
			}

			&:hover .image-overlay {
				opacity: 1;
			}

			&:hover .image-placeholder {
				transform: scale(1.05);
			}

			/* 移动端触摸优化 */
			@media (hover: none) and (pointer: coarse) {
				/* 移动端不显示悬停效果 */
				&:hover .image-overlay {
					opacity: 0;
				}

				&:hover .image-placeholder {
					transform: none;
				}

				/* 移动端点击反馈 */
				&:active .image-placeholder {
					transform: scale(0.98);
					opacity: 0.8;
				}
			}
		}
	}
}

/* ===========================================
 * 证书特殊样式
 * =========================================== */

.certificates {
	.certificate-card {
		.certificate-info {
			padding: var(--space-5) var(--space-2) var(--space-2);
			text-align: center;
			background: var(--gray-50); /* 使用基础灰色变量 */
			border-top: 1px solid var(--card-border);
			margin-top: auto;
			border-radius: 0 0 var(--radius-xl) var(--radius-xl);

			.certificate-name {
				font-size: var(--font-size-base);
				font-weight: var(--font-weight-semibold);
				color: var(--brand-primary); /* 使用品牌主色 */
				margin: 0;
				line-height: var(--line-height-snug);
			}
		}
	}
}

/* ===========================================
 * Element Plus 预览组件样式
 * =========================================== */

/* 确保图片预览器有足够高的层级 */
:deep(.el-image-viewer__wrapper) {
	z-index: 9999 !important;
}

:deep(.el-image-viewer__mask) {
	z-index: 9998 !important;
	background-color: rgba(0, 0, 0, 0.8) !important;
}

/* 确保预览器的控制按钮可见 */
:deep(.el-image-viewer__btn) {
	z-index: 10000 !important;
}

/* 确保图片可以点击 */
:deep(.el-image) {
	cursor: pointer !important;
}

:deep(.el-image__inner) {
	cursor: pointer !important;
}

/* 修复可能的遮罩问题 */
.image-overlay {
	pointer-events: none !important;
	z-index: 1 !important;
}

/* ===========================================
 * 动画定义
 * =========================================== */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(var(--space-8));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===========================================
 * 响应式设计
 * =========================================== */

@media (max-width: var(--breakpoint-lg)) {
	/* 平板端软件著作权 - 一行5个 */
	.software-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--space-4); /* 平板端稍微减少间距 */
	}
}

@media (max-width: var(--breakpoint-md)) {
	.achievements {
		padding: var(--space-16) var(--space-3);
	}

	.achievement-section {
		margin-bottom: var(--space-16);

		.section-header {
			margin-bottom: var(--space-8);

			.section-title {
				font-size: var(--font-size-2xl);
			}
		}
	}

	.cards-grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: var(--space-4); /* 中等屏幕减少间距 */
		padding: var(--space-6) 0; /* 减少上下padding */
	}

	/* 平板端软件著作权 - 一行4个，增加间距 */
	.software-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-3); /* 进一步减少间距 */

		.image-item .card {
			padding: var(--space-2); /* 减少内边距 */
			min-height: 220px; /* 减少最小高度 */

			.image-container {
				min-height: 180px; /* 减少最小高度 */

				.image-placeholder {
					height: 180px; /* 减少图片高度 */
				}
			}
		}
	}

	.image-item .card {
		min-height: 240px; /* 减少默认最小高度 */
		padding: var(--space-4); /* 减少内边距 */
		/* 增加点击区域 */
		touch-action: manipulation;

		.image-container {
			min-height: 180px; /* 减少最小高度 */

			.image-placeholder {
				height: 180px; /* 减少图片高度 */
			}
		}
	}

	.certificates .certificate-card .certificate-info {
		padding: var(--space-4) var(--space-2) var(--space-2);

		.certificate-name {
			font-size: var(--font-size-sm);
		}
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.achievements {
		padding: var(--space-12) var(--space-2);
	}

	.achievement-section {
		margin-bottom: var(--space-12);

		.section-header {
			margin-bottom: var(--space-6);

			.section-title {
				font-size: var(--font-size-xl);
			}
		}
	}

	.cards-grid {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: var(--space-3); /* 小屏幕适中间距 */
		padding: var(--space-4) 0; /* 减少上下padding */
	}

	/* 手机端软件著作权 - 一行3个，保持可读性 */
	.software-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-2); /* 最小间距 */

		.image-item .card {
			padding: var(--space-2); /* 最小内边距 */
			/* 移动端优化的最小点击区域 */
			min-height: 180px; /* 进一步减少高度 */

			.image-container {
				min-height: 140px; /* 减少最小高度 */

				.image-placeholder {
					height: 140px; /* 减少图片高度 */
				}
			}
		}
	}

	.image-item .card {
		min-height: 200px; /* 减少默认最小高度 */
		padding: var(--space-3); /* 适中内边距 */
		/* 优化移动端触摸体验 */
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;

		.image-container {
			min-height: 150px; /* 减少最小高度 */

			.image-placeholder {
				height: 150px; /* 减少图片高度 */
			}
		}
	}

	.certificates .certificate-card .certificate-info {
		padding: var(--space-3) var(--space-2) var(--space-2);

		.certificate-name {
			font-size: var(--font-size-xs);
			line-height: var(--line-height-tight);
		}
	}
}

/* 超小屏幕额外优化 */
@media (max-width: 480px) {
	.achievements {
		padding: var(--space-10) var(--space-1);
	}

	.cards-grid {
		gap: var(--space-2); /* 最小间距 */
		padding: var(--space-3) 0; /* 最小上下padding */
	}

	/* 超小屏软件著作权 - 一行2个，增大显示区域 */
	.software-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-2); /* 保持最小间距 */

		.image-item .card {
			min-height: 200px; /* 增加高度以适应内容 */
			padding: var(--space-2); /* 保持最小内边距 */

			.image-container {
				min-height: 160px; /* 适中高度 */

				.image-placeholder {
					height: 160px; /* 适中图片高度 */
				}
			}
		}
	}

	.cards-grid {
		grid-template-columns: 1fr 1fr;
	}

	.image-item .card {
		min-height: 180px; /* 减少高度 */
		padding: var(--space-2); /* 最小内边距 */

		.image-container {
			min-height: 140px; /* 减少最小高度 */

			.image-placeholder {
				height: 140px; /* 减少图片高度 */
			}
		}
	}
}
</style>
